import React, { Component } from 'react'
import { connect } from 'react-redux'
import styled from 'styled-components'
import DeliveryList from '../../../components/list'
import * as types from '@/store/actionCreator'

const DeliveryWrpper = styled.div`
  width: 100%;
  display:flex;
  flex-wrap: wrap;
`;


class Delivery extends Component {

  render() {
    const { list, toCart } = this.props;
    return (
      <DeliveryWrpper className="delivery-wrapper">
        <DeliveryList
          list={list}
          toCartEvent={(item) => toCart(item)}
        />
      </DeliveryWrpper>
    )
  }
  componentDidMount() {
    this.props.getData()
  }
}

const mapStateToProps = (state) => {
  return {
    list: state.cart.initData
  }
}

const mapActionToProps = (dispatch) => {
  return {
    getData() {
      const action = types.getCartData() // 返回了一个异步函数
      dispatch(action)
    },
    toCart(item) {
      const action = types.toCart(item)
      dispatch(action)
    }
  }
}

export default connect(mapStateToProps, mapActionToProps)(Delivery)